<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>优惠券</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-pop.css"/>
		<style type="text/css">
			.hdiv{
				width: 100%;
				padding: 10px;
				margin: 5px auto;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background-color: white;
			}
			.himg{
				width: 50px;
				height: 50px;
				margin: auto 15px;
			}
			.himg>img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.text{
				padding: 5px;
			}
			.quanlist{
				width: 100%;
				background-color: white;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
			.d1{
				width: 50%;
				padding: 5px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				border-right:1px solid #C0C0C0 ;
			}
			.d1>div,.d2>div{
				padding: 2px;
			}
			.d2{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-around;
				padding: 5px;
			}
			
			.checklist{
				background-color: white !important;
				border-radius: 0.5em;
				margin: 5px auto;
				padding: 5px;
			}
			
			.dleft{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.dleft>img{
				width: 70px;
				margin: 0.5em 0.5em 0.5em 0;
				border-radius: 50%;
			}
			.flex1{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
			}
			.left{
				width: 20%;
			}
			.left>img{
				width: 100%;
				border-radius:50% ;
			}
			.right{
				padding-left:1em ;
				width: 80%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				color: #676664;
				
			}
			.right>div{
				padding: 0.2em;
				
			}
			.mui-table-view-cell {
			    position: relative;
			    overflow: hidden;
			    padding: 0; 
			    -webkit-touch-callout: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">优惠券</h1>
		    <div class="hicon mui-icon-right-nav mui-pull-right" id="adddiv">
		    	<img src="../img/add.png"/>
		    </div>
		</header>
		<div class="mui-content">
		    <!--
            	作者：592176224@qq.com
            	时间：2019-02-16
            	描述：
		    <div class="hdiv">
		    	<div class="himg">
		    		<img src="../images/60x60.gif"/>
		    	</div>
		    	选择会员
		    </div>
            -->
		    <div class="checklist" id="memberdiv">
	    		<div class="dleft">
	    			<img src="../img/member-header.png"/>
	    			<span id="">
	    				请选择会员
	    			</span>
	    		</div>
		    </div>
		    <div class="text">
		    		选择优惠券
		    </div>
		    <div class="" id="qlist">
		    	
		    	<!--<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red">删除</a>
						</div>
						<div class="mui-slider-handle">
							<div class="mui-input-row mui-checkbox checklist">
			    	    <label><div class="quanlist"><div class="d1"><div class="fe1">
			    		name
			    		</div><div class="fe12">￥
			    		100
			    		</div></div><div class="d2 fe08"><div class="">
			    		100	
			    		元代金券</div><div class="">满
			    		100
			    		可用</div><div class="">
			    		2019-12-12
			    		</div></div></div></label>
			    	    <input name="Checkbox" class="listcheckbox" value="'+list[i].id+'" type="checkbox"></div>
						</div>
					</li>
		    	</ul>-->
		    	
		    
		    </div>
		    <div class="fgd"></div>
		    <div class="footdiv">
		    	<div class="fleft">
		    		<div class="mui-input-row mui-checkbox ">
		    		    <label>全选</label>
		    		    <input name="Checkbox" id="checkall" type="checkbox">
		    		</div>
		    		<div id="nums">
		    			
		    		</div>
		    	</div>
		    	<div id="footdivid" class="fright">
		    		发券
		    	</div>
		    </div>
		    <!--
            	作者：592176224@qq.com
            	时间：2019-04-26
            	描述：
			    <div id="popover" class="mui-popover">
				   <div class="listdiv">
				   		<div class="ssdiv">
				   			<div id="typenum" class="ssdivleft">手机</div>
				   			<input id="keyvalue" type="" name="" id="" value="" placeholder="输入卡号/电话/昵称"/>
				   			<div class="ssdivright hbg" onclick="recharge()">搜索</div>
				   		</div>
				   		<div class="listdivmain" id="listdivmain">
				   		</div>
				   </div>
				</div>
            -->
		    
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var list = [],
			typenums = 1,
			mid = 0,// 会员id
			coupon = [];
			window.onload = function(){
				mui.init();
				
				mid = getrequest().mid;
				if(mid > 0){
					memberdetail();
				}
				//获取优惠券列表
				getcouponlist();
				
				//选择会员
				g("memberdiv").addEventListener('tap',function(e){
                	var list = {
                         pageid:"vouchers",
                         returnfun:"setmamber"
            		}
                    mui.openWindow({
                        url: '../general/member-page.html',
                        id: 'member-page',
                        extras: list,
                        show: {
                            aniShow: 'zoom-fade-in',
                            duration: 300
                        },
                        waiting: {
                            autoShow: true
                        }
                    });
                })
				
				//添加优惠券
				g("adddiv").addEventListener("tap",function(){
					mui.openWindow({
						url:'coupons/addCoupons.html',
						id:'addCoupons'
					})
					
				});
				
				
				/*
           	 	var typenumPicker = new mui.PopPicker();
                typenumPicker.setData([{
                    value: '1',
                    text: '手机'
                },{
                    value: '2',
                    text: '卡号'
                }, {
                    value: '3',
                    text: '昵称'
                }]);
                 var typenum = document.getElementById('typenum');
                typenum.addEventListener('tap', function(event) {
                    typenumPicker.show(function(items) {
                        typenum.innerText = items[0].text;
                        typenums = items[0].value;
                    });
                }, false);*/
				
				
				//全选
				document.getElementById('checkall').addEventListener('change',function() {
		            var listBox = mui('.listcheckbox');
		            if (this.checked) {
		                listBox.each(function() {
		                    this.checked = true;
		                    coupon.push({id:this.value});
		                })
		            } else {
		                listBox.each(function() {
		                    this.checked = false;
		                })
		                coupon = [];
		            }
		        })
				
				//发券
				g("footdivid").addEventListener('tap',function(res){
					
					var data = {
						url:"/api/coupon/grant",
						data:{
							access_token:acctoken(),
							member_id:mid,
							coupon:coupon
						}
					}
					ajax(data,function(res){
						console.log(res);
						mui.toast(res.msg);
						setTimeout(function(){
							mui.back();
						},500)
					})
					
				})
				
				
				window.addEventListener("setmamber", setmamber); //添加自定义事件，其他页面调用
			}
			
			function setmamber(e) {
				mid = e.detail.mid;
				memberdetail(mid);
            }
			
			//选择事件
			function setcheckbox(e){
				if(e.checked){
					//$('#checkall').removeAttribute('checked');
					coupon.push({id:e.value});
				}else{
					document.getElementById('checkall').checked = false;
					for (var i = 0; i < coupon.length; i++) {
						if (coupon[i].id == e.value) {
							coupon.splice(i, 1);
						}
					}
				}
				
			}
			
			function getcouponlist(){
				var data = {
					url:'/api/coupon/lst',
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log(res);
					setcouponlist(res.data.data);
				})
				
			}
			
			function setcouponlist(list){
				var qlist = document.getElementById("qlist");
				var str = "";
				if(list.length>0){
					for (var i = 0; i < list.length;i++) {
					 str +=	'<ul class="mui-table-view">'+
								'<li class="mui-table-view-cell">'+
									'<div class="mui-slider-right mui-disabled">'+
										'<a class="mui-btn mui-btn-red" data-id="'+list[i].id+'">删除</a>'+
									'</div>'+
									'<div class="mui-slider-handle">'+
										'<div class="mui-input-row mui-checkbox checklist">'+
			    	    					'<label>'+
			    	    					'<div class="quanlist"><div class="d1"><div class="fe1">'+
				    							list[i].coupon_name +
				    							'</div><div class="fe12">￥'+
				    							list[i].coupon_money+
				    							'</div></div><div class="d2 fe08"><div class="">'+
				    							list[i].coupon_money+		
									    		'元代金券</div><div class="">满'+
									    		list[i].coupon_condition +
									    		'可用</div><div class="">'+
									    		list[i].end_time+
								    		'</div></div></div></label>'+
								    	    '<input name="Checkbox" class="listcheckbox" value="'+list[i].id+'" type="checkbox" onchange="setcheckbox(this)">'+
										'</div>'+
									'</div>'+
								'</li>'+
							'</ul>';
					}
				}else{
					str =  '<div class="nolistdiv">暂无优惠券</div>';
				}
				qlist.innerHTML = str;
				
				$('.mui-table-view').on('tap', '.mui-btn', function(event) {
					var elem = this;
					var id = parseInt($(elem).attr("data-id"));
					var li = elem.parentNode.parentNode;
					mui.confirm('确认删除该优惠券？', '', ["取消","确定"], function(e) {
						if (e.index == 1) {
							var data = {
								url:"/api/coupon/sdel",
								data:{
									access_token:acctoken(),
									id:id,
								}
							}
							ajax(data,function(res){
								console.log(res);
								mui.toast(res.msg);
								li.parentNode.removeChild(li);
							})
						} else {
							setTimeout(function() {
								$.swipeoutClose(li);
							}, 0);
						}
					});
				});
			}
			
			//id查询搜索会员
			function memberdetail(){
				var data = {
					url:"/api/member/detail",
					data:{
						access_token:acctoken(),
						id:mid,
					}
				}
				ajax(data,function(res){
					console.log("会员详情",res);
					setmember(res.data);
				})
			}
			
			function setmember(list){
				mid = list.id;
				
						var str = '<div class="flex1"><div class="left">';
								if(list.images&&list.images.path_name){
									str += '<img  src="'+list.images.path_name+'"/>';
								}else{
									str += '<img src="../img/member-header.png"/>';
								}
				    	    	str += '</div><div class="right"><div class="flexrowbetween"><span id="">'+
				    	    	list.username +
				    	    	'</span><span class="fe07">'+
				    	    	'</span></div><div id="" class="fe07">'+
				    	    	'</div><div id="" class="fe07">'+
				    	    	'余额：'+list.stay_money+'元'+
				    	    	'</div></div></div>';
		    			'</span></div>';
				    	g("memberdiv").innerHTML = str;  
				
			}
			
			
			function onshow(){
				getcouponlist();
			}
		</script>
	</body>

</html>